import React, { Component } from 'react'
import { Flex, WingBlank, WhiteSpace, Toast } from 'antd-mobile'
import * as Yup from 'yup'
import { Link } from 'react-router-dom'
import NavHeader from '@/components/NavHeader'
import { withFormik } from 'formik'
import styles from './index.module.css'
import { userLogin } from '@/api/user'

// 验证规则：
const REG_UNAME = /^[a-zA-Z_\d]{5,8}$/
const REG_PWD = /^[a-zA-Z_\d]{5,12}$/

class Login extends Component {
  // state = {
  //   username: '',
  //   password: ''
  // }

  // 获取用户名
  getUserName = e => {
    this.setState({
      username: e.target.value
    })
  }

  // 获取密码
  getPassword = e => {
    this.setState({
      password: e.target.value
    })
  }
  // 表单提交的事件
  handleSubmit = async e => {
    // 阻止表单提交是的默认行为
    e.preventDefault()
    // 获取账号和密码
    // const { username, password } = this.state
    // const { data: res } = await API.post('/user/login', {
    //   username,
    //   password
    // })
    // console.log('登录结果：', res)
    // const { status, body, description } = res
    // if (status === 200) {
    //   // 登录成功
    //   localStorage.setItem('hkzf_token', body.token)
    //   this.props.history.go(-1)
    // } else {
    //   // 登录失败
    //   Toast.info(description, 2, null, false)
    // }
  }

  render () {
    // const { username, password } = this.state
    // 通过 props 获取高阶组件传递进来的属性
    const { values, handleSubmit, handleChange, handleBlur, errors, touched } =
      this.props
    return (
      <div className={styles.root}>
        {/* 顶部导航 */}
        <NavHeader className={styles.navHeader}>账号登录</NavHeader>
        <WhiteSpace size='xl' />

        {/* 登录表单 */}
        <WingBlank>
          <form onSubmit={handleSubmit}>
            <div className={styles.formItem}>
              <input
                value={values.username}
                onChange={handleChange}
                className={styles.input}
                onBlur={handleBlur}
                name='username'
                placeholder='请输入账号'
              />
            </div>
            {/* 长度为5到8位，只能出现数字、字母、下划线 */}
            {errors.username && touched.username && (
              <div className={styles.error}>{errors.username}</div>
            )}
            <div className={styles.formItem}>
              <input
                className={styles.input}
                value={values.password}
                onChange={handleChange}
                onBlur={handleBlur}
                name='password'
                type='text'
                placeholder='请输入密码'
              />
            </div>
            {/* 长度为5到12位，只能出现数字、字母、下划线 */}
            {errors.password && touched.password && (
              <div className={styles.error}>{errors.password}</div>
            )}
            <div className={styles.formSubmit}>
              <button className={styles.submit} type='submit'>
                登 录
              </button>
            </div>
          </form>
          <Flex className={styles.backHome}>
            <Flex.Item>
              <Link to='/registe'>还没有账号，去注册~</Link>
            </Flex.Item>
          </Flex>
        </WingBlank>
      </div>
    )
  }
}

export default withFormik({
  mapPropsToValues: () => ({ username: '', password: '' }),
  handleSubmit: async (values, { props }) => {
    // console.log(values)
    const { username, password } = values
    let param = {
      username,
      password
    }
    const { data: res } = await userLogin(param)
    console.log('登录结果：', res)
    const { status, body, description } = res
    if (status === 200) {
      // 登录成功
      localStorage.setItem('hkzf_token', body.token)
      /* 
        1 登录成功后，判断是否需要跳转到用户想要访问的页面（判断 props.location.state 是否有值）。
        2 如果不需要（没有值），则直接调用 history.go(-1) 返回上一页。
        3 如果需要，就跳转到 from.pathname 指定的页面（推荐使用 replace 方法模式，而不是 push）。
      */
      if (!props.location.state) {
        // 此时，表示是直接进入到了该页面，直接调用 go(-1) 即可
        props.history.go(-1)
      } else {
        // replace: [home, map]
        props.history.replace(props.location.state.from.pathname)
      }
    } else {
      // 登录失败
      Toast.info(description, 2, null, false)
    }
  },
  validationSchema: Yup.object().shape({
    username: Yup.string()
      .required('账号为必填项')
      .matches(REG_UNAME, '长度为5到8位，只能出现数字、字母、下划线'),
    password: Yup.string()
      .required('密码为必填项')
      .matches(REG_PWD, '长度为5到12位，只能出现数字、字母、下划线')
  })
})(Login)
